<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box{
        border-radius: 50%;
        height: 500px;
        width: 500px;
        background: black;
        float: left;
        position: fixed;
    }
    .eyes1{
        border-radius: 50%;
        height: 100px;
        width: 100px;
        background: snow;
        float: left;
        position: absolute;
        margin-top: 130px;
        margin-left: 100px;
    }
    .eyes2{
        border-radius: 50%;
        height: 100px;
        width: 100px;
        margin-left: 300px;
        margin-top: 130px;
        background: snow;
        float: left;
        position: relative;
    }
    .mouth{
        height: 80px;
        width: 250px;
        background: snow;
        margin-top: 350px;
        margin-left: 120px;
        border-radius: 20% 20% 20% 20% ;
    }
    .turban{
        height: 80px;
        width: 400px;
        background: red;
        margin-left: 42px;
        margin-top: 30px;
        border-radius: 80% 80% 10% 10% ;

    }
</style>
<body>
<section class="fu"style="position: relative">
    <div class="box" style="position: absolute"></div>
    <div class="eyes1"style="position: absolute"></div>
    <div class="eyes2"></div>
    <div class="mouth"style="position: absolute"></div>
    <div class="turban" style="position: absolute"></div>
</section>
</body>
</html>